<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>插件中心</title>
  <link rel="shortcut icon" href="./images/favicon.ico" type="image/ico" />
  <link rel="stylesheet" href="./css/bootstrap.min.css" />
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" media="screen and (min-width: 750px)" href="./test/media.css" />
  <style>
    body {
      overflow: hidden;
    }

    .outer {
      width: 7.5rem;
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      margin: auto;
    }

    .outer::-webkit-scrollbar {
      display: none;
    }

    .logo {
      position: absolute;
      right: 0;
      top: 0;
      height: 1rem;
    }

    .outer h1 {
      color: #23527c;
      font-size: 1rem;
      padding-bottom: 0.2rem;
    }

    .outer p {
      font-size: 0.4rem;
      line-height: 2;
      padding-top: 2rem;
    }

    .outer .list-group-item {
      font-size: 0.3rem;
    }

    .panel,
    .list-group-item {
      border: none;
      background: transparent;
    }

    @media screen and (max-width: 750px) {
      .outer p:before {
        content: '当前屏幕小于750';
        color: #26a2ff;
      }
    }
  </style>
</head>

<body>
  <canvas id="space"></canvas>
  <div class="outer">
    <h1>lib</h1>
    <img class="logo" src="./images/earth.svg" />
    <div id="content"></div>
    <p></p>
  </div>
</body>
<script src="./js/rem.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/starSky.js"></script>
<script>
  starSky('space')

  const files = [
    {
      常用: {
        'reset.css': './css/reset.css',
        'class.css': './css/class.css',
        'mixins.less': './css/mixins.less',
        'animate.min.css': './css/animate.min.css',
        'vconsole.min.js': './js/vconsole.min.js',
        'rem.js': './js/rem.js',
        flexible: './js/flexible.js',
        'jquery.js': './js/jquery.js',
        'echarts.js': './js/echarts.js',
        gitignore: './js/gitignore.txt',
      },
    },
    {
      bootstrap: {
        'bootstrap.min.css': './css/bootstrap.min.css',
        'bootstrap.min.js': './js/bootstrap.min.js',
      },
    },
    {
      图片: {
        favicon: './images/favicon.ico',
        logo: './images/logo.png',
        "test.mp3": './images/test.mp3',
        "test.mp4": './images/test.mp4',
      },
    },
  ]

  function render() {
    let _content = document.getElementById('content')
    _content.innerHTML = ''
    files.map((item, index) => {
      let html = renderBody(item)
      _content.innerHTML += `
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne${index}">
            <h4 class="panel-title">
              <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne${index}" aria-expanded="true" aria-controls="collapseOne${index}">
                ${Object.keys(item)[0]}
              </a>
            </h4>
          </div>
          <div id="collapseOne${index}" class="panel-collapse collapse ${
        index === 0 ? 'in' : ''
        }" role="tabpanel" aria-labelledby="headingOne${index}">
            <div class="panel-body">
              ${html}
            </div>
          </div>
        </div>
      `
    })
  }

  function renderBody(data) {
    let html = ''
    Object.values(data).map((item) => {
      Object.keys(item).map((it) => {
        html += `<ul class="list-group" id="list">
        <li class="list-group-item">
           <a href="${item[it]}">${it}</a>
        </li>
      </ul>`
      })
    })
    return html
  }

  render()
</script>

</html>